<template>
  <div>
    <modal-view title="关联员工" ref="modalViewRef" hidden-submit width="700px" @close="close">
      <div style="height:300px" v-loading="loading">
        <data-view v-model="dataList">
          <template #content="{ dataItem }">
            <biz-user-card style="margin:5px" :card-data="dataItem"></biz-user-card>
          </template>
          <!-- <el-table-column type="index" width="50" label="#" />
          <el-table-column prop="Name" label="名称">
          </el-table-column> -->
        </data-view>
      </div>
    </modal-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { IS_DEVE } from "@/config";
import { queryGet } from "@/utils/api";
export default defineComponent({
  name: "CmpBizUserModalView",
})
</script>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import { ElMessage } from "element-plus";
import ModalView from "@/components/ModalView";
import { appAction } from "@/store/app";
import { docType, CmpDataClass } from "@/model/Cmp";
import { request } from "@/utils/axios";
import { BizUserDataClass } from "@/model/BizUser";
import DataView from "@/components/DataView";
import BizUserCard from "@/views/pages/BizUser/BizUserCard.vue";

let emit = defineEmits<{
  (e: "close"): void;
  (e: "submit", value: CmpDataClass): void
}>()

/**
 * 加载
 */
let loading = ref(false);

/**
 * 弹框
 */
let modalViewRef = ref();

/**
 * 表单
 */
let formRef = ref();

/**
 * 表单
 */
let formData = ref<CmpDataClass>(new CmpDataClass({}));

/**
 * 数据
 */
let dataList = ref<BizUserDataClass[]>([]);


/**
 * 表单验证
 */
let rules = reactive({
})

/**
 * 页面展示
 */
function show(data?: any) {
  formData.value = new CmpDataClass(data || {});
  if (formData.value.Id) {
    getUserData();
  }
  /**
   * 打开页面
   */
  modalViewRef.value.show();
}

/**
 *  保存前校验
 */
function beforeSubmit(): Promise<void> {
  return new Promise((resolve, reject) => {
    formRef.value.validate()
      .then(() => {

        let url = "";
        if (formData.value.Id) {
          //存在为修改
          url = "/" + docType + "/Update";
        } else {
          //不存在ID 为更新
          url = "/" + docType + "/Add";
        }

        //数据提交
        request(url, formData.value)
          .then(() => {
            ElMessage.success("表单数据保存成功");
            emit("submit", formData.value);
            resolve();
          })
          .catch(() => {
            appAction.resetPageuuid();
            reject();
          })
      })
      .catch(reject)
  })
}

/**
 * 关闭页面
 */
function close() {
  emit("close")
}

/**
 * 导出
 */
defineExpose({
  show
})

/**
 * 获取关联员工
 */
function getUserData() {
  loading.value = true;
  queryGet({
    docType: "BizUser",
    actionType: "CmpId",
    apiType: "SingleList"
  }, {
    Id: formData.value.Id
  })
    .then((res) => {
      dataList.value = res.map((item: any) => new BizUserDataClass(item))
    })
    .finally(() => {
      loading.value = false;
    })
}
/**
 * ====================
 *  页面初始化
 * ====================
 */


</script>

<style lang="less" scoped>
.page-header {
  display: flex;
}

.page-header-left {
  flex-shrink: 0;
  margin-right: 20px;
}

.page-header-right {
  flex-grow: 1;
}

.page-map {
  display: flex;
}

.page-map-left {
  flex-shrink: 0;
  flex-basis: 350px;
  margin-right: 20px;
}

.page-map-right {
  flex-grow: 1;
}

.page-map-dom {
  width: 350px;
  height: 350px;
}


.page-option {
  color: black;
}

.page-option-header {
  display: flex;
}

.page-option-header-line {
  color: rgba(0, 0, 0, 0.5);
  margin-left: 10px;
}
</style>